<template>
	<my-bottom-popup :show="showSafeguard" title="服务保障" confirm confirmText="我知道了" @close="closeSafeguard" @cancel="closeSafeguard">
		<view class="safeguard-popup">
			<view class="safeguard-item">
				<view class="safeguard-title">
					<image class="safeguard-icon" src="/static/images/master/service/safeguard.png"></image>
					<text class="title">一次付费</text>
				</view>
				<view class="describe">一次服务一次付费，上门不收任何其他费用，杜绝消费套路。</view>
			</view>
			<view class="safeguard-item">
				<view class="safeguard-title">
					<image class="safeguard-icon" src="/static/images/master/service/safeguard.png"></image>
					<text class="title">随心退</text>
				</view>
				<view class="describe">服务之前随时可申请退款</view>
			</view>
			<view class="safeguard-item">
				<view class="safeguard-title">
					<image class="safeguard-icon" src="/static/images/master/service/safeguard.png"></image>
					<text class="title">一次付费</text>
				</view>
				<view class="describe">平台为所有用户每次服务购买意外险，在售后时效内，因 服务导致用户非人身财产损失，至高可赔付1000元。</view>
			</view>
		</view>
	</my-bottom-popup>
</template>

<script lang="ts" setup>
	import MyBottomPopup from '@/components/my-bottom-popup/my-bottom-popup.vue';

	const emits = defineEmits(['update:show']);
	defineProps({
		showSafeguard: {
			type: Boolean,
			default: false,
		},
	});
	
	const closeSafeguard = (): void => {
		emits('update:show', false);
	};
</script>

<style lang="scss" scoped>
	.safeguard-popup {
		.safeguard-item {
			margin-bottom: 46rpx;
			padding: 0 4rpx;
			&:nth-last-child(1) {
				margin-bottom: 22rpx;
			}
			.safeguard-title {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.safeguard-icon {
					width: 28rpx;
					height: 34rpx;
					display: block;
				}
				.title {
					line-height: 28rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #242424;
					margin-left: 16rpx;
				}
			}
			.describe {
				line-height: 36rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #707070;
				padding: 0 16rpx 0 44rpx ;
			}
		}
	}
</style>